<!--
 * @Description: 
 * @Author: dh
 * @Date: 2021-08-19 17:18:39
 * @LastEditors: dh
 * @LastEditTime: 2021-09-15 09:42:08
-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>三栏--双飞翼布局-float-margin</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.container {
			overflow: hidden;
		}

		.left {
			margin-left: -100%;
			width: 200px;
			background-color: teal;
			float: left;
			min-height: 130px;
		}

		.right {
			margin-left: -220px;
			width: 220px;
			background-color: antiquewhite;
			float: left;
			min-height: 130px;
		}

		.middle {
			width: 100%;
			background-color: violet;
			float: left;
			min-height: 130px;
		}

		.inner {
			margin: 0 220px 0 200px;
			min-height: 130px;
			height: 400px;
			background: sienna;
			word-break: break-all;
		}
	</style>

	<body>
		<!-- 
        ① 特点
        同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。
        ③ 缺点
        多加一层 dom 树节点，增加渲染树生成的计算量。
     -->

		<!-- 
         实现步骤(前两步与圣杯布局一样)

        三个部分都设定为左浮动，然后设置middle的宽度为100%，此时，left和right部分会跳到下一行；
        通过设置margin-left为负值让left和right部分回到与center部分同一行；
        center部分增加一个内层div，并设margin: 0 200px；
      -->
		<div class="container">
			<div class="middle">
				<div class="inner">middle</div>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>
